<template>
	<view>
		<uni-nav-bar left-icon="arrowthinleft" title="轮播图" :border="false" :fixed="true" bg="bg-fff" color="#333" @clickLeft="goBack()"></uni-nav-bar>
		<view class="bg-f7f7f7 w100" style="height: 10rpx;"></view>
		<view class="padding-30">
			<view class="fs-28 color-333">轮播图</view>
			<view class="margin-top-30 clearfix">
				<view class="public_upload_img relative margin-right-30 margin-bottom-30 fl" v-for="(item, index) in imgs" :key="index" v-if="imgs.length > 0">
					<image class="shiming_upload_img" :src="item" mode="aspectFit"></image>
					<image class="shanchu" src="../../static/img/del.png" mode="aspectFit" @tap="del(index)"></image>
				</view>
				<view class="fl public_upload_img flex align-center justify-center flex-direction" v-if="imgs.length < 7" @tap="uploadImg()">
					<image src="../../static/img/add_img.png" style="width: 46rpx;height: 46rpx;"></image>
					<text class="fs-24 color-999 margin-top-10">上传</text>
				</view>
			</view>
			
			<view class="margin-top-100">
				<view @tap="submit()" class="callBtn color-fff radius60 h40 fs-28 text-center">确定</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgs:[],
				info:{
					pic:[]
				}
			}
		},
		onLoad() {
			this.init()
		},
		methods:{
			init(){
				this.$api.getshop_banner().then(res => {
					if (res.code == 1) {
						this.imgs = res.data.pic;
						this.info.pic = res.data.pic_id;
					}
				})
			},
			submit(){
				if(this.imgs.length == 0){
					this.$msg('请上传图片');
					return
				}
				if(typeof this.info.pic == 'object'){
					this.info.pic = this.info.pic.join(',');
				}
				this.$api.up_banner(this.info).then(res => {
					this.$msg(res.msg)
					if (res.code == 1) {
						setTimeout(()=>{
							uni.navigateBack()
						},400)
					}
				})
			},
			
			uploadImg(type){
				this.$tool.upload().then(res=>{
					this.imgs.push(res.showImg);
					this.info.pic.push(res.id);
				})
			},
			del(index){
				this.imgs.splice(index, 1);
				this.info.pic.splice(index, 1);
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.public_upload_img{
		width: 210rpx;
		height: 140rpx;
		border: 1rpx dashed rgba(112, 112, 112, 0.3);
		border-radius: 10rpx;
		margin-right: 30rpx;
	}
	.public_upload_img:nth-child(3n+3){
		margin-right: 0;
	}
	.shiming_upload_img{
		width: 100%;
		height: 100%;
	}
	.shanchu{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: -10rpx;
		top: -10rpx;
	}
	.callBtn{
		width: 100%;height: 80rpx;line-height: 80rpx;border-radius: 60rpx; background: linear-gradient(to bottom,#FDA730,#FE810A);
	}
</style>
